import { Link, Outlet, useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  function jump() {
    // 使用编程导航来跳转路由
    // navigate("/dashboard");

    // 携带参数的方式
    // navigate({
    //   pathname: "/dashboard",
    //   search: "id=1",
    // });

    navigate("/dashboard", { replace: true, state: "" });
  }

  return (
    <div>
      <h2>Home</h2>
      <Link to="./a">A</Link> <br />
      <Link to="./b">B</Link>
      <hr />
      <button onClick={jump}>跳转到 /dashboard</button>
      {/* 使用 Outlet 出口，来渲染子路由 */}
      <Outlet />
    </div>
  );
};

export default Home;
